<template>
    <div>
        <div class="toolbar">
            <!-- <el-button>撤销</el-button> -->
            <!-- <el-button>重做</el-button> -->
            <label for="input" class="insert">插入图片</label>
            <input
                id="input"
                type="file"
                hidden
                @change="handleFileChange"
            />
            <!-- <el-button>清空画布</el-button> -->
            <!-- <el-button>锁定</el-button> -->
            <!-- <el-button>解锁</el-button> -->
            <div class="canvas-config">
                <span>画布大小</span>
                <input v-model="canvasStyleData.width">
                <span>*</span>
                <input v-model="canvasStyleData.height">
            </div>
            <div class="canvas-config">
                <span>画布比例</span>
                <input v-model="scale" @input="handleScaleChange">%
            </div>
            <label class="insert" @click="hide">选择表情包</label>
        </div>
        <Index></Index>
    </div>
</template>
<script>
import {mapState} from "vuex"
import eventBus from "@/utils/eventBus.js"
import {deepCopy} from "@/utils/utils"
import toast from '@/utils/toast'
import Index from '@/components/biaoqingbao/index.vue'

// 导入generateID
import generateID from "@/utils/generateID"
// 导入自定义样式的包
import {commonStyle,commonAttr} from "@/custom-component/component-list"
export default {
    data(){
        return{
            scale:'100%',
            needToChange: [
                'top',
                'left',
                'width',
                'height',
                'fontSize',
                'borderWidth',
            ],
        }
    },
    components:{
        Index
    },
    computed:mapState([
        "componentData",
        "canvasStyleData",
        "curComponent"
    ]),
    created(){
        this.scale = this.canvasStyleData.scale
    },
    methods:{
        hide(){
            eventBus.$emit("changebiaoqingbao")
        },
        // 点击导入图片
        handleFileChange(e){
            // 获取图片信息
            const file = e.target.files[0]
            // 查看是否是图片样式
            if(!file.type.includes("image")){
                toast("只能放图片","error")
                return
            }

            const reader = new FileReader()
            reader.onload = (res) =>{
                // 图片路径
                const fileResult = res.target.result
                // console.log(res,"Res")
                // console.log(fileResult,"fileResult")
                const img = new Image()
                img.onload = () => {
                    // 将图片数据传输到vuex中
                    this.$store.commit("addComponent",{
                        component:{
                            ...commonAttr,
                            id:generateID(),
                            // 组件种类
                            component:"Picture",
                            label:"图片",
                            icon:"",
                            // 图片路径
                            propValue:fileResult,
                            // 图片样式
                            style:{
                                ...commonStyle,
                                top:0,
                                left:0,
                                width:img.width,
                                height:img.height,
                            }
                        }
                    })
                    document.querySelector('#input').setAttribute('type', 'text')
                    document.querySelector('#input').setAttribute('type', 'file')
                }
                img.src = fileResult
            }
            reader.readAsDataURL(file)
        },
        format(value){
            const scale = this.scale
            return value * parseInt(scale) / 100
        },
        getOriginStyle(value){
            const scale = this.canvasStyleData.scale
            const result = value / (parseInt(scale) / 100)
            return result
        },
        handleScaleChange(){
            clearTimeout(this.timer)
            this.timer = setTimeout(()=>{
                // 画布比例设一个最小值，不能为0
                // eslint-disable-next-line no-bitwise
                this.scale = (~~this.scale) || 1
                console.log(this.componentData);
                const componentData = deepCopy(this.componentData)
                console.log(componentData);
                componentData.forEach(component => {
                    Object.keys(component.style).forEach(key => {
                        if(this.needToChange.includes(key)){
                            // 根据原来的比例获取样式原来的尺寸
                            // 再用原来的尺寸 * 现在的比例得出新的尺寸
                            // 不能用 Math.round 防止 1 px 的边框变为 0
                            component.style[key] = Math.ceil(this.format(this.getOriginStyle(component.style[key])))
                        }
                    })
                })

                this.$store.commit("setComponentData",componentData)
                this.$store.commit("setCanvasStyle",{
                    ...this.canvasStyleData,
                    scale:this.scale
                })
            },1000)
        }
    }
}
</script>
<style scoped>
.toolbar{
    padding: 15px 10px;
    white-space: nowrap;
    overflow-x: auto;
    border-bottom: 1px solid #ddd;
}
.canvas-config{
    display: inline-block;
    margin-left: 10px;
    font-size: 14px;
    color: #606266;
}
input{
    width: 50px;
    margin-left: 10px;
    padding: 0 5px;
    border: 1px solid #ddd;
    color: #606266;
}
span{
    margin-left: 10px;
}
.insert{
    display: inline-block;
    white-space: nowrap;
    cursor: pointer;
    border: 1px solid #dcdfe6;
    padding: 11px 15px;
    font-size: 12px;
    margin-left: 10px;
    transition: .1s;
    border-radius: 3px;
    font-weight: 500;
    margin-right: 10px;
}
.insert:active{
    color: #3a8ee6;
    border-color: #3a8ee6;
}
.insert:hover{
    background-color: #ecf5ff;
    color: #3a8ee6;
}
</style>